<template>
  <div :class="{ 'je-admin-layout-page': true, 'je-func-layout': component == 'Func' }">
    <keep-alive>
      <component
        :is="enable && component"
        :key="menu?.id ?? 404"
        :menu="menu"
        v-bind="config"
      ></component>
    </keep-alive>
  </div>
</template>

<script>
  import { defineComponent, ref, reactive } from 'vue';
  import { useRoute } from 'vue-router';
  import { useMenuStore } from '@/stores/menu-store';
  import Page404 from '@/views/pages/system/404.vue';
  import PageMicro from './micro.vue';
  import PageIframe from './iframe.vue';
  import { Func } from '@jecloud/func';
  import { MenuType } from '@/data/enum/menu';
  import { Icon } from '@jecloud/ui';
  import { useAdminStore } from '@/stores/admin-store';
  import { decode, getDDCache, isEmpty, toBoolean } from '@jecloud/utils';
  export default defineComponent({
    name: 'AdminPage',
    components: {
      Page404,
      PageMicro,
      PageIframe,
      Func,
      IconPanel: Icon.IconPanel,
    },
    props: { layout: String },
    setup(props) {
      const menuStore = useMenuStore();
      const adminStore = useAdminStore();
      const route = useRoute();
      const menu = ref(menuStore.getMenuByRoute(route));
      const config = reactive({});
      const component = ref('Page404');
      const layout = ref(props.layout);
      const enable = ref(true);
      let ddInfo = null;
      // 路由参数
      const { menu: code, view, id } = route.params;
      // 路由get参数
      const { querys, orders, readOnly } = route.query;

      if (isEmpty(menu.value)) {
        // 菜单不存在，使用编码路由模式
        menu.value = { type: (view || MenuType.FUNC).toLocaleUpperCase(), code, configInfo: code };
      }
      // 菜单视图
      const menuView = menu.value?.options?.view;
      switch (menu.value?.type) {
        case MenuType.FUNC: // 普通功能
        case MenuType.FUNCFORM: // 普通功能表单
          component.value = 'Func';
          Object.assign(config, {
            funcCode: menu.value.code,
            class: 'je-func-layout',
            isFuncForm: [menuView, view].includes(MenuType.FUNCFORM.toLocaleLowerCase()), // 表单视图
            loadFirstData: menu.value.loadFirstData, // 加载第一条数据，配合表单功能使用
            querys: decode(querys) || undefined, // 查询条件
            orders: decode(orders) || undefined, // 排序条件
            readOnly: toBoolean(readOnly), // 只读
            beanId: id, // 表单业务主键
          });
          break;
        case MenuType.DIC: // 字典功能
          ddInfo = getDDCache(menu.value.code);
          if (ddInfo && ['LIST', 'TREE'].includes(ddInfo.type)) {
            component.value = 'Func';
            Object.assign(config, {
              funcCode: ddInfo.code, // 字典编码
              class: 'je-func-layout',
              isDDFunc: true,
            });
          }
          break;
        case MenuType.IFRAME:
          component.value = 'PageIframe';
          break;
        case MenuType.PLUGIN: // 插件
          if (menu.value.code === 'JE_PLUGIN_ICONS') {
            component.value = 'IconPanel';
          } else {
            // 微应用编码
            let microCode = menu.value.configInfo;
            const app = adminStore.getMicroConfig(microCode);
            if (app) {
              component.value = 'PageMicro';
              Object.assign(config, {
                app,
                querys: { menuId: menu.value.id },
              });
            }
          }
          break;
        default:
          // eslint-disable-next-line no-case-declarations
          const menuApp = adminStore
            .getMicroConfig4Menu()
            .find((app) => app.menuType === menu.value.type);
          // 查找对应绑定菜单类型的微应用
          if (menuApp) {
            component.value = 'PageMicro';
            Object.assign(config, {
              app: menuApp,
              querys: { menuId: menu.value.id },
            });
          }
          break;
      }

      return { component, config, menu, enable };
    },
  });
</script>
<style>
  .je-admin-layout-page {
    background-color: #f0f2f5;
  }
  .je-admin-layout-page.je-func-layout {
    padding: 14px;
  }
</style>
